<template>
  <div>

    <div :class="['hexagon-card', typeClass]">
    <div class="hexagon-content">
      <div class="hex-top">{{ displayType }}</div>
      <div class="hex-bottom">
        <slot />
      </div>
    </div>
    <div class="hexagon-border-layer"></div>
  </div>

  </div>

</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['pending', 'processing', 'completed', 'overdue'].includes(value)
  }
});

// 显示的中文标签
const displayType = computed(() => {
  const types = {
    pending: '待进行',
    processing: '进行中',
    completed: '已完成',
    overdue: '已超期'
  };
  return types[props.type];
});

// 对应的样式类名
const typeClass = computed(() => {
  const classes = {
    pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue'
  };
  return classes[props.type];
});
</script>

<style scoped>
.hexagon-card {
  position: relative;
  font-size: 5vw;
  width: 8vw;
  height: 6.8vw;
  margin: 1vw;
  /* 旋转60度 */
  transform: rotate(30deg);
  /* background: #3d2020; */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  /* padding: 10px; */
  box-sizing: border-box;
}
.hexagon-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 10;
  border-top: 0.5vw solid #8a3636;
  border-bottom: 0.5vw solid #8a3636;
 
}
.hexagon-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 6vw;
  /* height: 10vw; */
  transform: rotate(60deg);
  border-top: 0.5vw solid #8a3636;
  border-bottom: 0.5vw solid #8a3636;
}
.hexagon-border-layer {
  content: "";
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 6vw;
  /* height: 10vw; */
  transform: rotate(120deg);
  border-top: 0.5vw solid #8a3636;
  border-bottom: 0.5vw solid #8a3636;
}
.hexagon-content {
  padding: 1vw;
  text-align: center;
  transform: rotate(-30deg);
}

.hex-top {
  font-weight: bold;
  /* margin-bottom: 4px; */
  font-size: 1.8vw;
}

.hex-bottom {
  font-size: 1.8vw;
}

/* pending: 'pending',
    processing: 'processing',
    completed: 'completed',
    overdue: 'overdue' */
.pending {
  background: linear-gradient(
    to right,
    #017D7D 0%,
    rgba(39, 120, 134, 0.65) 50%,
    #0C565B 100%
  );

}
.pending::before{
  border-top: 0.5vw solid #67FDFF;
  border-bottom: 0.5vw solid #67FDFF;
}
.pending::after{
  border-top: 0.5vw solid #67FDFF;
  border-bottom: 0.5vw solid #67FDFF;
}
.pending .hexagon-border-layer{
  border-top: 0.5vw solid #67FDFF;
  border-bottom: 0.5vw solid #67FDFF;
}
.processing {
  background: linear-gradient(
    to right,
    #017D7D 0%,
    rgba(39, 120, 134, 0.65) 50%,
    #0C5B22 100%
  );
}
.processing::before{
  border-top: 0.5vw solid #67FF77;
  border-bottom: 0.5vw solid #67FF77;
}
.processing::after{
  border-top: 0.5vw solid #67FF77;
  border-bottom: 0.5vw solid #67FF77;
}
.processing .hexagon-border-layer{
  border-top: 0.5vw solid #67FF77;
  border-bottom: 0.5vw solid #67FF77;
}
.completed {
  background: linear-gradient(
    to right,
    #7D6901 0%,
    rgba(134, 125, 39, 0.65) 50%,
    #7D6901 100%
  );
}
.completed::before{
  border-top: 0.5vw solid #FFF067;
  border-bottom: 0.5vw solid #FFF067;
}
.completed::after{
  border-top: 0.5vw solid #FFF067;
  border-bottom: 0.5vw solid #FFF067;
}
.completed .hexagon-border-layer{
  border-top: 0.5vw solid #FFF067;
  border-bottom: 0.5vw solid #FFF067;
}
/* 使用 ::before 添加边框 */

.overdue {
  background: linear-gradient(
    to right,
    #7D0101 0%,
    rgba(134, 39, 39, 0.65) 50%,
    #5B0C0C 100%
  );
}
.overdue::before{
  border-top: 0.5vw solid #FF2F02;
  border-bottom: 0.5vw solid #FF2F02;
}
.overdue::after{
  border-top: 0.5vw solid #FF2F02;
  border-bottom: 0.5vw solid #FF2F02;
}
.overdue .hexagon-border-layer{
  border-top: 0.5vw solid #FF2F02;
  border-bottom: 0.5vw solid #FF2F02;
}
</style>
